<template>
  <div>
    <div class="idquery">
      <el-input
        placeholder="请输入内容"
        v-model="value"
        class="input-with-select"
        clearable
        @clear="clickinput"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="clicksearch"
        ></el-button>
      </el-input>

      <!-- Form -->
      <el-button type="primary" @click="dialogFormVisible = true" class="btn"
        >添加讲师</el-button
      >

      <el-dialog
        title="添加讲师"
        :visible.sync="dialogFormVisible"
        append-to-body
      >
        <el-form :model="form">
          <el-form-item label="用户名/账号名:" :label-width="formLabelWidth">
            <el-input
              v-model="form.name"
              autocomplete="off"
              class="dialogFormVisibleinput"
            ></el-input>
          </el-form-item>
          <el-form-item label="讲师名:" :label-width="formLabelWidth">
            <el-input
              v-model="form.teacher"
              autocomplete="off"
              class="dialogFormVisibleinput"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>

    <!-- 教师列表 -->
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column prop="date" label="日期" sortable align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" sortable align="center">
        </el-table-column>
        <el-table-column
          prop="teachername"
          label="讲师"
          sortable
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          :formatter="formatter"
          align="center"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <div class="three">
              <el-button type="success" size="small" append-to-body
                >编辑</el-button
              >
              <el-button
                type="success"
                size="small"
                @click="addteacher = true"
                append-to-body
                >编辑</el-button
              >
              <el-dialog
                title="添加角色"
                :visible.sync="addteacher"
                append-to-body
              >
                <el-form :model="form">
                  <el-form-item label="当前用户:" :label-width="formLabelWidth">
                    <!-- <el-input v-model="form.region" autocomplete="off"></el-input> -->
                  </el-form-item>
                  <el-form-item label="当前角色" :label-width="formLabelWidth">
                    <el-select v-model="form.desc" placeholder="请选择讲师名字">
                      <el-option label="路飞" value="shanghai"></el-option>
                      <el-option label="索隆" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="addteacher = false">取 消</el-button>
                  <el-button type="primary" @click="addteacher = false"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
              <el-button type="primary" size="small" @click="checkdetail = true"
                >详情</el-button
              >
              <el-dialog
                title="查看详情"
                :visible.sync="checkdetail"
                append-to-body
              >
                <el-form :model="form">
                  <!-- <el-form-item label="详情:" :label-width="formLabelWidth">
                  <el-input v-model="form.data1" autocomplete="off"></el-input>
                </el-form-item> -->
                  这是详情页
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="checkdetail = false">取 消</el-button>
                  <el-button type="primary" @click="checkdetail = false"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
              <el-button
                size="small"
                type="danger"
                @click="deleteing(scope.$index, scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="50"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props:{},
  data () {
    return {
        value:'',
        addteacher:false,
        checkdetail:false,
        dialogFormVisible: false,
        formLabelWidth: '120px',
         currentPage4:1,
        form: {
           name: '',
           teacher: '',
          region: '',
           desc: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
         
        },
          tableData: [{
          date: '2016-05-02',
          name: 'z',
          teachername:"r",
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: 'b',
           teachername:"n",
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: 'd',
           teachername:"r",
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: 'c',
           teachername:"s",
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    }
  },
  components: {

  },
  methods: {
        //地址
        formatter(row, column) {
        console.log(column)
        return row.address;
      },
      //点击清空输入框的值
      clickinput(){

      },
      //点击搜索
      clicksearch(){

      },
      //点击删除教师这一项
      deleteing(item,index){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //发请求
          console.log(item)
          console.log(index)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //分页
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  },
  mounted() {},
  computed: {},
  watch: {}
}
</script>

<style lang='scss' scoped>
.idquery {
  width: 500px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  .btn {
    margin-left: 20px;
  }
  .btn {
    margin-left: 20px;
  }
}
.block {
  margin-top: 20px;
}
.dialogFormVisibleinput {
  width: 400px;
}
.three {
  width: 200px;
  display: flex;
  justify-content: space-around;
}
</style>